<template>
  <div class="contents">
    <PanelTitle title="产业区划" />
    <div class="mt">
      <div class="choseTab">
        <div :class="currentChose == 0 ? 'active' : ''" @click="selectIndex(0)">
          一强镇
        </div>
        <div :class="currentChose == 1 ? 'active' : ''" @click="selectIndex(1)">
          二园
        </div>
        <div :class="currentChose == 2 ? 'active' : ''" @click="selectIndex(2)">
          三基地
        </div>
      </div>
      <div class="infosone" v-if="currentChose == 0">
        根据福建省“3212”工程实施方案，打造城郊乡太子参产业强镇，全面提升太子参产业。以太子参为主导产业，重点提升精深加工能力，推动三产融合发展，努力把城郊乡打造成为全国太子参产业强镇和福建省特色中药材产业基地。
      </div>
      <div class="infostwo" v-if="currentChose == 1">
        1）生物医药循环经济产业园
        <br />
        位于城郊乡，继续完善产业园配套基础设施建设，加大生物医药及关联行业企业入园的招商力度，打造海西经济区中药材种植供应基地、药品加工制造基地和药品区域物流中心。
        <br />
        （2）太子参产业园
        <br />
        位于城郊乡，建成集太子参植物工厂、太子参仓储中心、太子参鲜参初加工中心、太子参深加工中心、太子参研发培训中心、鲜参及干品交易中心、旅游康养中心等功能为一体的国家级现代农业产业园。
      </div>
      <div class="infosthree" v-if="currentChose == 2">
        （1）GAP 标准化基地
        <br />

        涉及城郊乡、东源乡、富溪镇、黄柏乡、英山乡、宅中乡、乍洋乡和楮坪乡，大力发展以太子参为主，黄精、覆盆子、钩藤、药用玫瑰、金线莲、铁皮石斛等为辅的中药材种植，着力推进标准化建设，提升产地初加工能力，打造优质中药材标准化生产基地。
        <br />

        （2）优质种苗培育基地
        <br />

        涉及英山乡凤洋村、城郊乡下村，支持有条件的涉农企业或专业合作社开展中药材种质资源保护、利用，加强工厂化育苗等设施设备建设，建立集约化种苗繁育体系，打造县域优质中药材种苗培育基地。
        <br />

        （3）中药材养生基地
        <br />

        发挥“养生天堂”、“长寿福地”的美誉称号，充分挖掘中药材饮食文化、养生文化，围绕乡村旅游线路，扶持建设一批以柘荣道地中药材为题材的药膳农家乐、休闲食疗农庄等中药材养生基地。
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import PanelTitle from "../../component/PanelTitle.vue";
const emit = defineEmits<{
  changeIndex: [number]
}>()
const currentChose = ref(0);
let timer: number = 0
const selectIndex = (index: number) => {
  currentChose.value = index
  emit('changeIndex', currentChose.value)
  clearInterval(timer)
  timer = setInterval(() => {
    let index = currentChose.value + 1
    currentChose.value = index % 3
    emit('changeIndex', currentChose.value)
  }, 5000)
}
onMounted(() => {
  selectIndex(0)
})
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-28);
  }
}

.choseTab {
  display: flex;
  align-items: center;
  margin: vh(10) vw(18);
}

.choseTab>div {
  width: vw(106);
  height: vh(31);
  line-height: vh(31);

  background: rgba(9, 37, 45, 0.95);
  border-radius: vh(5);


  border-radius: vh(5);
  border: vh(1) solid #c1fdc9;
  // border-image: linear-gradient(0deg, #c1fdc9, #90f9c4, ) 1 1;

  font-weight: 400;
  font-size: vh(14);
  color: #ffffff;
  text-align: center;
  margin-right: vh(10);

  cursor: pointer;
}

.choseTab>.active {
  background: rgba(20, 74, 88, 0.57);
  box-shadow: 0px 0px 22px 0px rgba(0, 235, 232, 0.42);
  border: 1px solid #19f7ff;
  color: #32c8a7;

}

.infosone {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: vh(14);
  color: #2cd7bc;
  line-height: vh(32);
  margin: vh(30) vw(18);
}

.infostwo {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: vh(12);
  color: #2cd7bc;
  line-height: vh(22);
  margin: vh(30) vw(18);
}

.infosthree {
  height: vh(220);
  overflow-y: scroll;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: vh(12);
  color: #2cd7bc;
  line-height: vh(22);
  margin: vh(12) vw(18);
}

::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-track {
  display: none;
}

::-webkit-scrollbar-thumb {
  display: none;
}
</style>